import React, { Component } from "react";
import "./05.css";

class Child extends Component {
  onClick() {
    console.log(this.props);
  }
  render() {
    let { title, score } = this.props;
    return (
      <div
        className="child"
        onClick={() => {
          this.props.event(this.props);
        }}
      >
        <div className="left">99</div>
        <div className="right">
          <div>{title}</div>
          <div>{score}</div>
        </div>
      </div>
    );
  }
}

class Detail extends Component {
  render() {
    return (
      <div className="detail">
        <div>{this.props.data.title}</div>
        <div>{this.props.data.score}</div>
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    list: [
      {
        title: "1去去去去去去去去去去球器",
        score: "90分",
      },
      {
        title: "2去去去去去去去去去去球器",
        score: "80分",
      },
      {
        title: "3去去去去去去去去去去球器",
        score: "96分",
      },
    ],
    data: {},
  };
  render() {
    return (
      <div>
        {this.state.list.map((item, index) => {
          return (
            <Child
              {...item}
              key={index}
              event={(val) => {
                console.log(val);
                this.setState({
                  data: val,
                });
              }}
            />
          );
        })}
        <Detail data={this.state.data} />
      </div>
    );
  }
}
